<template>
    <ul>
        <li v-for="item in personData" :key="item.id">
            {{ item.name }}
        </li>
    </ul>

    <ol>
        <li v-for="(item, index) in personData" :key="item.id">
            {{ item.name }} - {{ index }}
        </li>
    </ol>

    <table>
        <thead>
            <tr>
                <th>学生编号</th>
                <th>学生姓名</th>
                <th>学生操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in personData" :key="item.id">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>
                    <button>删除</button>
                </td>
            </tr>
        </tbody>
    </table>


    <template v-for="item in 3" :key="item">
        <h1>标题</h1>
        <p>文章段落文章段落文章段落文章段落文章段落文章段落</p>
    </template>

</template>

<script setup>
import { ref } from 'vue';

const personData = ref([
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    { id: 3, name: '王五' },
]);


</script>

<style scoped></style>